<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    h3 {
      line-height: 60px;
    }

    li {
      line-height: 40px;
      border: 1px dashed #333;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <h3 id="title">批量操作元素</h3>
    <ul class="list">
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
    </ul>
    <input type="text" class="demo">
  </div>
</body>
<script>
  // 面向过程

  // 操作 -> 单元素 => 直接操作
  // var title = document.getElementById("title");
  // console.log(title.innerHTML);
  // title.innerHTML = "标题";

  // 操作 -> 多元素 => 遍历获取 在操作
  // var liList = document.querySelectorAll(".list li");
  // for (var i = 0; i < liList.length; i++) {
  //     var li = liList[i];
  //     li.innerHTML = "123123";
  // }

  // => 批量操作元素 => 有可能是单元素,多元素  => 方法有区别
  // 使用 document.querySelectorAll()  无论是单元素获取还是多元素 => 都会存放到集合中

  // debugger;
  // 接收一个css选择器 作为参数
  function GetEle(selector) {
    // {}
    // this -> {}

    this.eles = document.querySelectorAll(selector);
    // this.[[prototype]] = GetEle.prototype
    // return this;
  }

  // 获取和设置 集合中元素 html结构
  // html("123123")   有参数就设置
  // html()           没有参数就获取
  GetEle.prototype.html = function (con) {
    // debugger;
    // this => 指向调用此方法的实例化对象
    if (arguments.length >= 1) {  // 有参数就设置
      for (var i = 0; i < this.eles.length; i++) {
        var ele = this.eles[i];
        ele.innerHTML = con;  // arguments[0]
      }
    } else {   //没有参数就获取
      return this.eles[0].innerHTML;
    }
  }
  // 获取和设置 集合中元素 text结构
  // text("123123")   有参数就设置
  // text()           没有参数就获取
  GetEle.prototype.text = function (con) {
    if (arguments.length >= 1) {  // 有参数就设置
      for (var i = 0; i < this.eles.length; i++) {
        var ele = this.eles[i];
        ele.innerText = con;  // arguments[0]
      }
    } else {   //没有参数就获取
      return this.eles[0].innerText;
    }
  }

  // 获取和设置 集合中表单元素 value值
  // value("123123")   有参数就设置
  // value()           没有参数就获取
  GetEle.prototype.val = function (con) {
    if (arguments.length >= 1) {  // 有参数就设置
      for (var i = 0; i < this.eles.length; i++) {
        var ele = this.eles[i];
        ele.value = con;  // arguments[0]
      }
    } else {   //没有参数就获取
      return this.eles[0].value;
    }
  }

  // 设置 集合中元素  隐藏
  GetEle.prototype.hide = function () {
    for (var i = 0; i < this.eles.length; i++) {
      var ele = this.eles[i];
      ele.style.display = "none";
    }
  }
  GetEle.prototype.show = function () {
    for (var i = 0; i < this.eles.length; i++) {
      var ele = this.eles[i];
      ele.style.display = "block";
    }
  }


  // debugger;
  var $title = new GetEle("#title");
  console.log($title);
  $title.html("1111111111");
  $title.hide();


  var $li = new GetEle(".list li");
  console.log($li);
  $li.html("22222222222");
  $li.hide();

  var $demo = new GetEle(".demo");
  console.log($demo);
  $demo.val("哈哈哈哈");
  $demo.hide();


  setTimeout(() => {
    $title.show();
    $li.show();
    $demo.show();
  }, 1000);










</script>

</html>